<!doctype html>
<html lang="en" class="no-js">
<head>
<style>
<!--

.abc a:link{

 background-color: #5F9EA0; 

 border:#ffff00 1px solid;

 color: #ffff00; 

 height: 20px; 

 padding:5px; 

 text-decoration: none;

}

.abc a:hover{

 background-color: #c8d8f0; 

 border:#0000ff 1px solid;

 color: #333333; 

 height: 20px; 

 padding:5px;

 text-decoration: none;

}

-->
<!--

p span{
font-size:40px; /* 首字大小 */
float:left;
}
-->
<!--
p right{
float:right;
}
-->

</style>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">


	<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
  	
	<title>League of Legends</title>
</head>
<body>
<main class="cd-image-mask-effect">
	<section class="project-1 cd-project-mask">
	  <h1>蔚</h1>
	  <div class="featured-image"></div>
		<div class="mask">
			<img src="img/mask-01.png" alt="mask">
			<span class="mask-border mask-border-top"></span>
			<span class="mask-border mask-border-bottom"></span>
			<span class="mask-border mask-border-left"></span>
			<span class="mask-border mask-border-right"></span>
		</div>

		<a href="#0" class="project-trigger">了解更多</a>

		<a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>

		<div class="cd-project-info" data-url="Vi">
			<!-- content loaded using js -->
		</div>

		<a href="#0" class="project-close cd-img-replace">Close Project</a>
	</section> <!-- .cd-project-mask -->

	<section class="project-2 cd-project-mask">
		<h1>贾克斯</h1>
		<div class="featured-image"></div>
		<div class="mask">
			<img src="img/mask-02.png" alt="mask">
			<span class="mask-border mask-border-top"></span>
			<span class="mask-border mask-border-bottom"></span>
			<span class="mask-border mask-border-left"></span>
			<span class="mask-border mask-border-right"></span>
		</div>

		<a href="#0" class="project-trigger">了解更多</a>

		<a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>

		<div class="cd-project-info" data-url="Jax">
			<!-- content loaded using js -->
		</div>

		<a href="#0" class="project-close cd-img-replace">Close Project</a>
	</section> <!-- .cd-project-mask -->

	<section class="project-3 cd-project-mask">
		<h1>孙悟空</h1>
		<div class="featured-image"></div>
		<div class="mask">
			<img src="img/mask-03.png" alt="mask">
			<span class="mask-border mask-border-top"></span>
			<span class="mask-border mask-border-bottom"></span>
			<span class="mask-border mask-border-left"></span>
			<span class="mask-border mask-border-right"></span>
		</div>

		<a href="#0" class="project-trigger">了解更多</a>

		<a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>

		<div class="cd-project-info" data-url="Monkeyking">
			<!-- content loaded using js -->
		</div>

		<a href="#0" class="project-close cd-img-replace">Close Project</a>
	</section> <!-- .cd-project-mask -->

	<section class="project-4 cd-project-mask dark-bg">
		<h1>易</h1>
		<div class="featured-image"></div>
		<div class="mask">
			<img src="img/mask-04.png" alt="mask">
			<span class="mask-border mask-border-top"></span>
			<span class="mask-border mask-border-bottom"></span>
			<span class="mask-border mask-border-left"></span>
			<span class="mask-border mask-border-right"></span>
		</div>

		<a href="#0" class="project-trigger">了解更多</a>

		<a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>

		<div class="cd-project-info" data-url="MasterYi">
			<!-- content loaded using js -->
		</div>

		<a href="#0" class="project-close cd-img-replace">Close Project</a>
	</section> <!-- .cd-project-mask -->

	<section class="project-5 cd-project-mask dark-bg">
		<h1>泰达米尔</h1>
		<div class="featured-image"></div>
		<div class="mask">
			<img src="img/mask-05.png" alt="mask">
			<span class="mask-border mask-border-top"></span>
			<span class="mask-border mask-border-bottom"></span>
			<span class="mask-border mask-border-left"></span>
			<span class="mask-border mask-border-right"></span>
		</div>

		<a href="#0" class="project-trigger">了解更多</a>

		<a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>

		<div class="cd-project-info" data-url="Tryndamere">
			<!-- content loaded using js -->
		</div>

		<a href="#0" class="project-close cd-img-replace">Close Project</a>
	</section> <!-- .cd-project-mask -->
	
		<section class="project-6 cd-project-mask dark-bg">
		<h1>个人</h1>
		<div class="featured-image"></div>
		<div class="mask">
			<img src="img/mask-06.png" alt="mask">
			<span class="mask-border mask-border-top"></span>
			<span class="mask-border mask-border-bottom"></span>
			<span class="mask-border mask-border-left"></span>
			<span class="mask-border mask-border-right"></span>
		</div>

		<a href="#0" class="project-trigger">了解更多</a>

		<a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>

		<div class="cd-project-info" data-url="Myself">
			<!-- content loaded using js -->
		</div>

		<a href="#0" class="project-close cd-img-replace">Close Project</a>
	</section> <!-- .cd-project-mask -->
</main>
	
<script>
	if( !window.jQuery ) document.write('<script src="js/jquery-3.0.0.min.js"><\/script>');
</script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>